<template>
	<PageContainer>
		<div class="search-container">
			<n-button @click="search">查询</n-button>
		</div>
		<div class="container">
			<BasicTable ref="basicTable" :title="'菜单列表'" :max-height="400" :columns="columns" :pagination="{show:false}"
				:loading="loading" :tableData="tableData" :default-expand-all="false" :row-key="rowKey">
				<template v-slot:toolRight>
					<n-button type="primary" class="mr-10" size="tiny" @click="addOrEditMenu()">新增</n-button>
				</template>
			</BasicTable>
		</div>
		<EditMenuDrawer ref="editMenuDrawer" @refresh="getMenuList"></EditMenuDrawer>
	</PageContainer>
</template>

<script setup lang="ts">
	import { ref,h,defineOptions } from 'vue';
	import { BasicTable } from '@/components/Common/BasicTable';
	import type { DataTableColumns } from 'naive-ui'
	import {NButton,useMessage } from 'naive-ui'
	import {getMenuAllList,deleteMenu} from "@/api/system"
	import EditMenuDrawer from "@/views/system/menu/components/EditMenuDrawer.vue"
	import PageContainer from '@/components/Common/PageContainer/index.vue'
	defineOptions({
		name:'system_menu'
	})
	type RowData = {
		menu_name : String
		component_name : String
		redirect_path : String
		menu_path : String
		component : String
		permissions : String
		sort : Number
		id : String
		children : RowData[]
	}
	const columns:DataTableColumns<RowData> = [
		{
			title: '菜单名称',
			key: 'menu_name',
			width: 220,
		},
		{
			title: '菜单标识',
			key: 'component_name',
			width: 120
		},
		{
			title: '重定向路径',
			key: 'redirect_path',
			width: 160
		},
		{
			title: '菜单路径',
			key: 'menu_path',
			width: 160
		},
		{
			title: '菜单组件映射',
			key: 'component',
			width: 220
		},
		{
			title: '页面菜单组件映射',
			key: 'second_component',
			width: 220
		},
		{
			title: '权限字符串',
			key: 'permissions',
			width: 220
		},
		{
			title: '排序',
			key: 'sort',
			width: 100
		},
		{
			title: '操作',
			key: 'actions',
			fixed:'right',
			width: 200,
			render(row) {
				const addBtn = h(
						NButton,
						{
							size: 'tiny',
							type:'primary',
							onClick: () => addOrEditMenu(row, true)
						},
						{ default: () => '新增' }
					)
				const editBtn = h(
						NButton,
						{
							size: 'tiny',
							type:'primary',
							class: 'ml-10',
							onClick: () => addOrEditMenu(row, false)
						},
						{ default: () => '编辑' }
					)
				const delBtn = h(
						NButton,
						{
							size: 'tiny',
							type:'error',
							class: 'ml-10',
							loading: row.deleteLoading,
							onClick: () => deleteMenuById(row)
						},
						{ default: () => '删除' }
					)
				if([2,4].includes(row.menu_type)){
					return [editBtn,delBtn]
				}else{
					return [addBtn,editBtn,delBtn]
				}
				
			}
		}
	]
	const basicTable = ref(null)
	const loading = ref<Boolean>(false)
	const rowKey = (row : RowData) => row.id
	let tableData = ref<Array<Object>>([])
	const message = useMessage()
	onMounted(()=>{
		getMenuList()
	})
	/**
	 * get menu
	 */
	function getMenuList(){
		loading.value = true
		getMenuAllList().then(res=>{
			tableData.value = res.data
			loading.value = false
		})
	}
	/**
	 * add or edit menu
	 */
	const editMenuDrawer = ref<HTMLElement | null>(null)
	function addOrEditMenu(row:RowData | null, flag: Boolean | null){
		editMenuDrawer.value?.open(row,flag)
	}
	/**
	 * delete menu
	 */
	function deleteMenuById(row:RowData){
		row.deleteLoading = true
		deleteMenu({id:row.id}).then(()=>{
			message.success("删除成功")
			row.deleteLoading = false
			getMenuList()
			
		})
	}
	
</script>

<style lang="scss" scoped>
	@mixin bg-border{
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	} 
	.search-container{
		@include bg-border();
		margin-bottom: 10px;
	}
	.container {
		height: calc(100% - 30px);
		overflow:hidden;
		padding:10px;
		background: #fff;
	}
</style>